<template>
	<view :style="[AppSkinVar]">
		<view class="account bg-white e-m-b-20">
			<view class=" e-flex e-flex-items-start e-m-b-20 ">
				<text>{{ $t('user.转账账号') }}</text>
				<view class="e-flex-1 e-m-l-60">
					<e-input border="none" v-model="account" :placeholder="$t('user.请输入转账账号(手机/邮箱)')"></e-input>
					<view class="c-c7 e-m-t-30">{{ $t('user.转账服务费') }}{{ scale }}{{scaleType === 1 ? '%' : '' }}</view>
				</view>
			</view>
			<e-line></e-line>
			<view class="e-flex  e-p-t-20">
				<text>{{ $t('public.验证码') }}</text>
				<view class="e-flex-1 e-m-l-60 e-flex">
					<e-input v-model="validCode" border="none" :placeholder="$t('public.请输入验证码')" />
					<e-code-button ref="eCodeRef" :start-text="$t('public.获取验证码')" :change-text="$t('public.X秒重新获取')"
						:end-text="$t('public.重新获取')" size="small" type="primary" shape="circle"
						@click="getCode"></e-code-button>
		
				</view>
			</view>
		</view>
		<transfer-card :scale="scale" :max="max" :scaleType="scaleType" :operationa="operationa" type="转账" :ttype="1" @transfer="transfer" ></transfer-card>
		<password-popup ref="passwordRef" :show="passwordShow" @confirm="confirm"
			@close="passwordShow = false"></password-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import transferCard from './child/transfer-card.vue'
	import {
		getTurnExtractRule,
		postTurn,
		postTurnSms
	} from '@/common/request/api'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { useUser } from '@/common/stores';
	import { storeToRefs } from 'pinia';
	import type {
		CodeInstance
	} from '@/uni_modules/endless-ui/typing'

	const props = defineProps<{
		id:string
	}>()
	const ctx = useCurrentInstance()

	const userStores = useUser()
	const {
		accountList,
		userInfo
	} = storeToRefs(userStores)

	const scale = ref(0)
	const operationa = ref(1)
	const account = ref('')
	const validCode = ref('')
	const scaleType = ref(1)
	const money = ref(0)

	const eCodeRef = ref<CodeInstance>(null)
	const getCode = () => {
		if (!userInfo.value.phone) {
			ctx.$goTo('/pages/public/account/binding');
			return 
		}
		if (!account.value) {
			ctx.$toastApp(ctx.$t('user.请输入转账账号(手机/邮箱)'))
			return
		}

		postTurnSms().then(res => {
			eCodeRef.value?.start()
		})

	}

	const passwordShow = ref(false)
	const passwordRef = ref()

	const transfer = (_money : number) => {
		if (!account.value) {
			ctx.$toastApp(ctx.$t('user.请输入转账账号(手机/邮箱)'))
			return
		}
		if (!validCode.value) {
			ctx.$toastApp(ctx.$t('public.请输入验证码'))
			return
		}
		if (!_money) {
			ctx.$toastApp(ctx.$t('user.请输入转账额度'))
			return
		}
		money.value = _money
		passwordShow.value = true

	}
	const confirm = (payword : string) => {
		passwordRef.value?.reset?.()
		passwordShow.value = false
		postTurn({
			payword,
			money: money.value,
			userName: account.value,
			code:validCode.value,
			strategy: props.id
		}).then(res => {
			userStores.getAccountList()
			ctx.$goRedirectTo('/pages/user/wallet/currencyStatus', {
				type: 0,
				account: res.arrivalUser,
				money: res.arrivalMoney,
				time: res.arrivalTime
			})
		}).catch(res => {
			ctx.$goTo('/pages/user/wallet/currencyStatus', {
				type: 2,
				msg: res.msg
			})
		})
	}


	const wallet = computed(() => accountList.value.find(item => item.strategy === props.id))
	const max = computed(() => wallet.value?.money || 0)

	onLoad(() => {
		getTurnExtractRule(props.id).then(res => {
			operationa.value = res.rule.operationa
			scale.value = res.rule.scale
			scaleType.value = res.rule.scaleType
		})
		userStores.getAccountList()
	})
</script>
<style>
	page {
		background-color: #f7f7f7;
		padding: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.c-c7 {
		color: #c7c7c7;
	}

	.account {
		box-shadow: 0px 4px 20px 0px #f3f3f3;
		border-radius: 10px;
		padding: 60rpx 30rpx;
		background: #feffff;
	}
</style>